<template>
    <div class="chat-footer">
        <div class="tool-box">
            <el-button type="info" icon="el-icon-message" circle></el-button>
        </div>
        <el-input v-model="question" class="input"></el-input>
        <el-button type="primary" icon="el-icon-edit" :disabled="isDisabled" @click="sendQuestion"></el-button>
    </div>
</template>

<script>

import { mapActions, mapMutations, mapState } from "vuex"
export default {
    data() {
        return {
            question: ''
        }
    },
    methods: {
        ...mapMutations('chat', ['setQuestion']),
        sendQuestion() {
            this.setQuestion({
                id: 3,
                name: '李四',
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                time: '2018-08-15 10:10:10',
                content: this.question,
                isUser: true
            })
            setTimeout(() => {
                this.setQuestion({
                    id: 4,
                    name: '李四',
                    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                    time: '2018-08-15 10:10:10',
                    content: `看起来您遇到了Vue Router的相关问题。beforeRouteUpdate 是Vue Router提供的一个导航守卫，用于在当前路由更新时触发。通常情况下，您需要确保以下几点：

在组件内部定义 beforeRouteUpdate 钩子函数，并在函数内编写逻辑。
确保当前组件是通过路由加载的。
检查是否有其他导航守卫或全局前置守卫影响了 beforeRouteUpdate 的执行。
如果您可以提供更多关于问题的背景信息以及代码示例，我将非常乐意帮助您进一步解决这个问题。`,
                    isNew:true
                })
            },2000)
        }
    },
    computed: {
        isDisabled() {
            return this.question.length === 0
        }
    }

}

</script>

<style scoped lang="scss">
.chat-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input {
    width: 50%;
    margin: 0 1% 0 5%;
}
</style>